<template>
  <div class="BaseInformation">
    <div class="report" id="pdfDom">
      <div class="export-title" id="export-title">企业分析报告</div>
      <div class="base-top">
        <div class="baseTop-title">
          <span>基本信息</span>
          <span class="baseTop-btn">
            <a-button
              style="margin-right: 20px"
              v-if="EntInfo.approvalSt === 1 || EntInfo.approvalSt === 2"
              type="primary"
              ghost
              @click="JumpUseCenter('/usercenter/reviseInformation')"
              data-html2canvas-ignore="true"
            >
              <!-- <router-link to="reviseInformation"> -->
              修改
              <!-- </router-link> -->
            </a-button>
            <a-tag
              style="color: #389e0d; font-size: 14px"
              v-if="EntInfo.approvalSt === 1"
              color="green"
              data-html2canvas-ignore="true"
              >已通过</a-tag
            >
            <a-tag
              style="color: #cf1322; font-size: 14px"
              v-else-if="EntInfo.approvalSt === 2"
              color="red"
              data-html2canvas-ignore="true"
              >已驳回</a-tag
            >
            <a-tag
              style="color: #fa8c16; font-size: 14px"
              v-else
              color="orange"
              data-html2canvas-ignore="true"
            >
              待审核
            </a-tag>
            <a-button
              style="float: right"
              type="link"
              @click="openComApproval()"
              data-html2canvas-ignore="true"
            >
              审核记录
            </a-button>
            <a-button
              style="float: right"
              type="link"
              @click="exportReport()"
              data-html2canvas-ignore="true"
            >
              导出报告
            </a-button>
          </span>
        </div>
        <div class="clearfix baseTop-footer">
          <div class="f-left footer-l">
            <div>
              <a-icon type="home" class="mr-10" />企业名称：<em>{{
                EntInfo.name
              }}</em>
            </div>
            <div>
              <a-icon type="money-collect" class="mr-10" />注册资本：<em
                >{{ EntInfo.registeredCapital }}万</em
              >
            </div>
            <div>
              <a-icon type="calendar" class="mr-10" />成立日期：<em>{{
                EntInfo.incorporationDate
              }}</em>
            </div>
          </div>
          <div class="f-left footer-r">
            <div>
              <a-icon type="bars" class="mr-10" />法人类型：<em>
                <template v-if="EntInfo.type == 1"> 机关法人</template>
                <template v-if="EntInfo.type == 2"> 事业单位法人</template>
                <template v-if="EntInfo.type == 3"> 企业法人</template>
                <template v-if="EntInfo.type == 4"> 社团法人</template>
                <template v-else>其他</template>
              </em>
            </div>
            <div>
              <a-icon type="user" class="mr-10" />法人：<em>{{
                EntInfo.legal
              }}</em>
            </div>
            <div>
              <a-icon type="phone" class="mr-10" />法人联系方式：<em>{{
                EntInfo.legalTel
              }}</em>
            </div>
          </div>
        </div>
        <div class="mt-10 baseTop-main">
          <h4>业务范围：</h4>
          <p>{{ EntInfo.natureBusiness }}</p>
        </div>
        <div class="clearfix baseTop-footer">
          <div class="f-left footer-l">
            <div>
              <a-icon type="environment" class="mr-10" />地址：<em>{{
                EntInfo.address
              }}</em>
            </div>
            <div>
              <a-icon type="user" class="mr-10" />联系人：<em>{{
                EntInfo.linkMan
              }}</em>
            </div>
          </div>
          <div class="f-left footer-r">
            <div>
              <a-icon type="ie" class="mr-10" />企业网址：<em>{{
                EntInfo.site
              }}</em>
            </div>
            <div>
              <a-icon type="phone" class="mr-10" />手机号码：<em>{{
                EntInfo.linkTel
              }}</em>
            </div>
          </div>
        </div>
        <div class="mt-10 baseTop-main">
          <h4>企业简介：</h4>
          <p>{{ EntInfo.companyProfile }}</p>
        </div>
      </div>
      <div class="analysis">
        <div class="left" id="export-spec">
          <span class="title">企业画像</span>
          <CompanyPortrait :data="hxData"></CompanyPortrait>
        </div>
        <div class="right">
          <span class="title">优化建议</span>
          <span class="desc">展示前5项优化建议</span>
          <OptimizeSuggestion
            id="export-spec2"
            :data="yhData"
          ></OptimizeSuggestion>
        </div>
      </div>
      <div class="relation">
        <span class="title">关系网络</span>
        <div class="chart">
          <RelationshipChart :data="gxData"></RelationshipChart>
        </div>
      </div>
    </div>

    <div class="base-main">
      <div class="Base-title">
        <span>资质证明</span>
        <span class="add-btn">
          <a-button
            type="primary"
            ghost
            @click="JumpUseCenter('/usercenter/NewQualification?type=1')"
          >
            <!-- <router-link :to="{path:'/usercenter/NewQualification',query:{type:1}}"> -->
            新增
            <!-- </router-link> -->
          </a-button>
        </span>
      </div>
      <div class="action">
        <a-table
          :scroll="{ x: 1500 }"
          :columns="ZZcolumns"
          :data-source="ZZDataList"
          :pagination="ipagination"
          :rowKey="(record) => record.id"
        >
          <div
            slot="approvalSt"
            slot-scope="text"
            style="color: #ee6224"
            v-if="text == 0"
          >
            审核中
          </div>
          <div
            slot="approvalSt"
            slot-scope="text"
            style="color: #0da9b0"
            v-else-if="text == 1"
          >
            已通过
          </div>
          <div
            slot="approvalSt"
            slot-scope="text"
            style="color: #e9284f"
            v-else-if="text == 2"
          >
            未通过
          </div>
          <a slot="name" slot-scope="text">{{ text }}</a>
          <span slot="action" slot-scope="text, record">
            <a @click="seeEdit(record.id, 1, true)">查看详情</a>
            <a
              v-if="record.approvalSt != 0"
              @click="handleEdit(record.id, 1)"
              class="ml-24"
              >编辑</a
            >
            <a
              v-if="record.approvalSt != 0"
              @click="deleEdit(record.id)"
              class="ml-24"
              >删除</a
            >
            <a @click="openQuaApproval(record, 2)" class="ml-24">审核记录</a>
          </span>
        </a-table>
      </div>
    </div>

    <div class="base-footer">
      <div class="Base-title">
        <span>荣誉奖项</span>
        <span class="add-btn">
          <a-button
            type="primary"
            ghost
            @click="JumpUseCenter('/usercenter/NewQualification?type=2')"
          >
            <!-- <router-link :to="{path:'/usercenter/NewQualification',query:{type:2}}"> -->
            新增
            <!-- </router-link> -->
          </a-button>
        </span>
      </div>
      <div class="action">
        <a-table
          :scroll="{ x: 1500 }"
          :columns="ZZcolumns"
          :data-source="HonorList"
          :pagination="RYipagination"
          :rowKey="(record) => record.id"
        >
          <div
            slot="approvalSt"
            slot-scope="text"
            style="color: #ee6224"
            v-if="text == 0"
          >
            审核中
          </div>
          <div
            slot="approvalSt"
            slot-scope="text"
            style="color: #0da9b0"
            v-else-if="text == 1"
          >
            已通过
          </div>
          <div
            slot="approvalSt"
            slot-scope="text"
            style="color: #e9284f"
            v-else-if="text == 2"
          >
            未通过
          </div>
          <a slot="name" slot-scope="text">{{ text }}</a>
          <span slot="action" slot-scope="text, record">
            <a @click="seeEdit(record.id, 2, true)">查看详情</a>
            <a
              v-if="record.approvalSt != 0"
              @click="handleEdit(record.id, 2)"
              class="ml-24"
              >编辑</a
            >
            <a
              v-if="record.approvalSt != 0"
              @click="deleEdit(record.id, 2)"
              class="ml-24"
              >删除</a
            >
            <a @click="openQuaApproval(record, 3)" class="ml-24">审核记录</a>
          </span>
        </a-table>
      </div>
      <!-- <div class="img-box">
        <ul class="clearfix">
          <viewer :images='HonorList'>
            <li class="f-left mr-20 hoorlist_box" v-for="(item,index) in HonorList" :key="index">
              <img :src="getImageUrl(item.fileUrl)" alt="">
              <p>{{item.certName}}</p>
              <div class="btn-box">
                <a-button type="primary" class="mr-10" @click="handleEdit(item.id,2)">
                  编辑
                </a-button>
                <a-button type="danger" @click="deleEdit(item.id)">
                  删除
                </a-button>
              </div>
            </li>
          </viewer>
        </ul>
      </div> -->
    </div>
    <ApprovalHistory
      @close="approvalHistoryClose"
      :visible="approvalHistoryShow"
      :rows="approvalHistoryRows"
      :title="approvalHistoryTitle"
    />
  </div>
</template>

<script>
import {
  getQualificantionList,
  delQualificantion,
} from "@/apis/com/qualification";
import ApprovalHistory from "@/views/components/ApprovalHistory.vue";
import {
  getCompaynInfo,
  getCompanyPortrait,
  getCompanyOptimize,
} from "@/apis/com/company";
import { listRelationship } from "@/apis/user/Relationship";
import { setIsSign, getCookiesUserInfo } from "@/utils/auth"; // get token from cookie
import { getApprovalList } from "@/apis/com/approvalHistory";
import CompanyPortrait from "@/views/components/CompanyPortrait.vue";
import OptimizeSuggestion from "@/views/components/OptimizeSuggestion.vue";
import RelationshipChart from "@/views/components/RelationshipChart.vue";

const ZZcolumns = [
  {
    title: "序号",
    dataIndex: "idNum",
    width: 80,
    align: "center",
    customRender: (text, record, index) => `${index + 1}`, // 显示每一行的序
  },
  {
    title: "证书类型",
    dataIndex: "type",
    align: "center",
    customRender: function (text) {
      if (text == 1) {
        return "资质";
      } else if (text == 2) {
        return "荣誉";
      }
    },
  },
  {
    title: "证书名称",
    dataIndex: "name",
  },
  {
    title: "证书编号",
    dataIndex: "code",
    align: "center",
  },
  {
    title: "状态",
    dataIndex: "approvalSt",
    align: "center",
    scopedSlots: { customRender: "approvalSt" },
    // customRender: function (text) {
    //   if (text == 1) {
    //     return "审核中";
    //   } else if (text == 2) {
    //     return "已通过";
    //   } else if (text == 3) {
    //     return "未通过";
    //   }
    // },
  },
  {
    title: "发证时间",
    dataIndex: "issueDate",
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "action",
    align: "center",
    fixed: "right",
    width: 300,
    scopedSlots: { customRender: "action" },
  },
];
const RYcolumns = [
  {
    title: "序号",
    dataIndex: "idNum",
    width: 80,
    align: "center",
    customRender: (text, record, index) => `${index + 1}`, // 显示每一行的序
  },
  {
    title: "证书类型",
    dataIndex: "type",
    align: "center",
    customRender: function (text) {
      if (text == 1) {
        return "资质";
      } else if (text == 2) {
        return "荣誉";
      }
    },
  },
  {
    title: "证书名称",
    dataIndex: "certName",
  },
  {
    title: "证书编号",
    dataIndex: "certNo",
    align: "center",
  },
  {
    title: "状态",
    dataIndex: "auditStatus",
    align: "center",
    scopedSlots: { customRender: "auditStatus" },
    // customRender: function (text) {
    //   if (text == 1) {
    //     return "审核中";
    //   } else if (text == 2) {
    //     return "已通过";
    //   } else if (text == 3) {
    //     return "未通过";
    //   }
    // },
  },
  {
    title: "发证时间",
    dataIndex: "certDate",
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "action",
    align: "center",
    fixed: "right",
    width: 200,
    scopedSlots: { customRender: "action" },
  },
];
export default {
  components: {
    ApprovalHistory,
    CompanyPortrait,
    OptimizeSuggestion,
    RelationshipChart,
  },
  data() {
    return {
      RYcolumns,
      ZZcolumns,
      ZZDataList: [],
      EntInfo: {},
      HonorList: [], //荣誉列表
      ipagination: {
        total: 0,
        pageSize: 10,
        current: 1,
        pageSizeOptions: ["10", "20", "30", "40", "50"],
        showTotal: (total) => `共有 ${total} 条数据`,
        showQuickJumper: true,
        showSizeChanger: true,
        onShowSizeChange: (current, pageSize) =>
          this.onSizeChange(current, pageSize),
        onChange: (page, pageSize) => this.onPageChange(page, pageSize),
      },
      RYipagination: {
        total: 0,
        pageSize: 10,
        current: 1,
        pageSizeOptions: ["10", "20", "30", "40", "50"],
        showTotal: (total) => `共有 ${total} 条数据`,
        showQuickJumper: true,
        showSizeChanger: true,
        onShowSizeChange: (current, pageSize) =>
          this.RYonSizeChange(current, pageSize),
        onChange: (page, pageSize) => this.RYonPageChange(page, pageSize),
      },
      approvalHistoryShow: false,
      approvalHistoryRows: [],
      approvalHistoryTitle: "",
      hxData: {},
      yhData: [],
      gxData: {},
    };
  },
  created() {
    this.getEntBaseInfo();
    this.getZZPageList();
    this.getHonorPageList();
    this.getPortraitData();
    this.getOptimizeData();
    this.getRelationData();
  },
  methods: {
    approvalHistoryClose() {
      this.approvalHistoryRows = [];
      this.approvalHistoryShow = false;
      this.approvalHistoryTitle = "";
    },
    async openQuaApproval(row, type) {
      const params = {
        sourceId: row.id,
        type,
        pageNumber: 1,
        pageSize: 5,
      };
      const res = await getApprovalList(params);
      console.log("openComApproval", res);
      if (res.code === 200) {
        this.approvalHistoryRows = res.rows;
        this.approvalHistoryShow = true;
        this.approvalHistoryTitle = row.name;
      }
    },

    async openComApproval() {
      const params = {
        sourceId: JSON.parse(getCookiesUserInfo()).companyId,
        type: 1,
        pageNumber: 1,
        pageSize: 5,
      };

      const res = await getApprovalList(params);
      console.log("openComApproval", res);
      if (res.code === 200) {
        this.approvalHistoryRows = res.rows;
        this.approvalHistoryShow = true;
        this.approvalHistoryTitle = "企业信息审核记录";
      }
    },

    JumpUseCenter(url) {
      let _IsSing = this.EntInfo.isSign;
      if (true) {
        this.$router.push(url);
      } else {
        this.$store.commit("setIsSign", true);
        setIsSign(true);
        // this.$message.warning("您需要完成信用承诺函签署再进行该操作。");
      }
    },
    // 获取荣誉资质列表
    getHonorPageList() {
      let _params = {
        pageNum: this.RYipagination.current,
        pageSize: this.RYipagination.pageSize,
        type: 2,
        companyId: JSON.parse(getCookiesUserInfo()).companyId,
      };
      getQualificantionList(_params)
        .then((res) => {
          console.log("我的荣誉资质列表", res);
          console.log(res);
          if (res.code == 200) {
            this.HonorList = res.rows;
            this.RYipagination.total = res.total;
          }
        })
        .catch((error) => {});
    },
    RYonPageChange(page, pageSize) {
      this.RYipagination.current = page;
      this.getHonorPageList();
    },
    RYonSizeChange(current, pageSize) {
      this.RYipagination.pageSize = pageSize;
      this.getHonorPageList();
    },
    // 获取资质证明列表
    async getZZPageList() {
      let _params = {
        pageNum: this.ipagination.current,
        pageSize: this.ipagination.pageSize,
        type: 1,
        companyId: JSON.parse(getCookiesUserInfo()).companyId,
      };

      const res = await getQualificantionList(_params);
      if (res.code == 200) {
        this.ZZDataList = res.rows;
        this.ipagination.total = res.total;
      }
      console.log("getZZPageList", res);

      // getZZPageList(_params)
      //     .then((res) => {
      //         console.log("我的资质证明");
      //         console.log(res);
      //         if (res.code == 200) {
      //             this.ZZDataList = res.data.records;
      //             this.ipagination.total = res.data.total;
      //         }
      //     })
      //     .catch((error) => { });
    },
    // 获取企业基本信息
    async getEntBaseInfo() {
      const companyId = JSON.parse(getCookiesUserInfo()).companyId;
      const res = await getCompaynInfo(companyId);
      if (res.code == 200) {
        this.EntInfo = res.data;
        console.log("获取企业基本信息", this.EntInfo);
      }

      // getEntBaseInfo()
      //     .then((res) => {
      //         if (res.code == 200) {
      //             this.EntInfo = res.data;
      //         }
      //     })
      //     .catch((error) => { });
    },
    onPageChange(page, pageSize) {
      this.ipagination.current = page;
      this.getZZPageList();
    },
    onSizeChange(current, pageSize) {
      this.ipagination.pageSize = pageSize;
      this.getZZPageList();
    },
    seeEdit(id, type, look) {
      this.$router.push(
        "/usercenter/NewQualification?type=" +
          type +
          "&id=" +
          id +
          "&look=" +
          look
      );
    },
    handleEdit(id, type) {
      this.$router.push(
        "/usercenter/NewQualification?type=" + type + "&id=" + id
      );
    },
    deleEdit(id, type = 1) {
      let that = this;
      that.$confirm({
        title: "您确定要删除此信息吗?",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          console.log("OK");
          delQualificantion(id)
            .then((res) => {
              console.log(res);
              if (res.code == 200) {
                that.$message.success("删除成功");

                if (type === 1) {
                  that.getZZPageList();
                } else {
                  that.getHonorPageList();
                }
              } else {
                that.$message.error("删除失败");
              }
            })
            .catch((error) => {});
        },
        onCancel() {
          console.log("Cancel");
        },
      });
    },
    async getPortraitData() {
      const companyId = JSON.parse(getCookiesUserInfo()).companyId;
      let res = await getCompanyPortrait(companyId);
      console.log("企业画像数据", res);
      this.hxData = res.data;
    },
    async getOptimizeData() {
      const companyId = JSON.parse(getCookiesUserInfo()).companyId;
      let res = await getCompanyOptimize(companyId);
      console.log("企业优化数据", res);
      this.yhData = res.rows;
    },
    async getRelationData() {
      const companyId = JSON.parse(getCookiesUserInfo()).companyId;
      let res = await listRelationship({ companyFrom: companyId });

      console.log("企业关系数据", res);
      let chartData = {
        companyName: this.EntInfo.name,
        legal: this.EntInfo.legal,
        relations: res.rows,
      };
      this.gxData = chartData;
    },
    exportReport() {
      let onclone = (cb) => {
        if (cb.getElementById("export-title")) {
          cb.getElementById("export-title").style.display = "block";
        }
        if (cb.getElementById("export-spec")) {
          cb.getElementById("export-spec").style.height = "840px";
        }
        if (cb.getElementById("export-spec2")) {
          cb.getElementById("export-spec2").style.width = "660px";
        }
      };
      this.getPdf("企业分析报告", onclone);
    },
  },
};
</script>

<style lang="less" scoped>
.BaseInformation {
  .base-top {
    padding: 20px 24px;
    background-color: #ffffff;
    border-radius: 4px;

    .baseTop-title {
      span {
        font-size: 22px;
        color: #303133;
      }

      .baseTop-btn {
        margin-left: 16px;
        width: 60px;
        height: 32px;
        background-color: #ffffff;
        border-radius: 4px;
      }
    }

    .baseTop-main {
      padding: 14px 23px;
      background-color: #f5f7fa;
      border-radius: 4px;
      margin-bottom: 15px;

      h4 {
        font-size: 16px;
        color: #303133;
        margin-bottom: 14px;
      }

      p {
        font-size: 14px;
        color: #606266;
      }
    }

    .baseTop-footer {
      font-size: 16px;
      color: #606266;

      .footer-l {
        width: 50%;
        padding-left: 8px;
        line-height: 30px;
      }

      .footer-r {
        padding-left: 8px;
        line-height: 30px;
      }
    }
  }

  .analysis {
    display: flex;
    justify-content: space-between;

    .left,
    .right {
      margin-top: 16px;
      border-radius: 4px;
      padding: 19px 24px;
      width: calc(50% - 10px);
      background-color: #ffffff;
      height: 480px;

      .title {
        font-size: 22px;
        color: #303133;
      }

      .desc {
        color: #a1a1a1;
        margin-left: 20px;
      }
    }
  }

  .relation {
    margin-top: 16px;
    height: 480px;
    background-color: #ffffff;
    padding: 19px 24px;

    .title {
      font-size: 22px;
      color: #303133;
    }

    .chart {
      width: 100%;
      height: 100%;

      .chart-area {
        width: 800px;
        margin: auto;
      }
    }
  }

  @media screen and (max-width: 1600px) {
    .analysis {
      display: block;

      .left,
      .right {
        border-radius: 4px;
        padding: 19px 24px;
        width: 100%;
        background-color: #ffffff;

        .title {
          font-size: 22px;
          color: #303133;
        }

        .desc {
          color: #a1a1a1;
          margin-left: 20px;
        }
      }
    }
  }

  .base-main {
    margin-top: 16px;
    padding: 19px 24px;
    background-color: #ffffff;
    border-radius: 4px;

    .Base-title {
      margin-bottom: 10px;

      span {
        font-size: 22px;
        color: #303133;
      }

      .add-btn {
        margin-left: 16px;
        width: 60px;
        height: 32px;
        background-color: #ffffff;
        border-radius: 4px;
      }
    }

    .action {
      span {
        a {
          font-size: 14px;
          color: #188af1;
        }
      }
    }
  }

  .base-footer {
    margin-top: 16px;
    padding: 19px 24px;
    background-color: #ffffff;
    border-radius: 4px;

    .Base-title {
      margin-bottom: 10px;

      span {
        font-size: 22px;
        color: #303133;
      }

      .add-btn {
        margin-left: 16px;
        width: 60px;
        height: 32px;
        background-color: #ffffff;
        border-radius: 4px;
      }
    }

    .img-box {
      ul {
        li {
          padding: 13px;
          width: 272px;
          text-align: center;

          img {
            width: 245px;
            height: 174px;
            object-fit: cover;
            padding-bottom: 14px;
            border-bottom: solid 1px #ebeef5;
          }

          span {
            display: inline-block;
            margin-top: 16px;
            color: #303030;
            font-weight: 700;
          }
        }
      }
    }
  }
}

.hoorlist_box {
  position: relative;

  &:hover {
    .btn-box {
      display: block;
    }
  }

  p {
    padding-top: 10px;
  }

  .btn-box {
    position: absolute;
    bottom: 60px;
    right: 20px;
    z-index: 11;
    display: none;
  }
}

a {
  color: #188af1 !important;
}

.export-title {
  display: none;
  font-size: 28px;
  padding: 40px 0px 20px;
  font-weight: 700;
  text-align: center;
}
</style>
